<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="直通分货" left-arrow @click-left="$router.go(-1)"></van-nav-bar>



		<div class="goodsFromWarp" style="padding-bottom:5px;">
				<div class="goodsInputWarp">
						<div class="goodsInputLabel" style="width:35%;">
							<div class="goodsInputBorder"></div>
							<div class="skuName" style="width: 120px;">入库标签：</div>
						</div>
						<van-field
							class="skuInput"
							clearable
							v-model="editForm.shserno_s"
							placeholder="请填写入库标签"
							@keyup="onEnter($event,do_inputspbar)"
						 />
						 <div class="searchBtn">
						 	<button :disabled="isdisabled"  @click.stop="_getFenHuoBtn()" >
						 		<van-icon name="ellipsis" color="#1989fa"  />
						 	</button>
						 </div>
				</div>


				<div class="storeWarp" >
					<van-row class="goodsName">
					  <van-col span="24"> <span>预检单号：</span>{{editForm.bill}}</van-col>
					</van-row>


					<van-row class="goodsNameWarp" style="margin-top: 5px;">
						<p style="line-height: 24px;">[直通]供货商:{{skuRow.vendor}} {{skuRow.vendor>''?'-':''}} {{skuRow.vensname}}</p>
					</van-row>



					<van-row class="goodsName" style="margin-top: 5px;">
						<p style="line-height: 24px;" >[单]总数量：{{skuRow.yi_fen}} {{skuRow.yi_fen>''?'/':''}} {{skuRow.ying_fen}}总托盘：{{skuRow.yi_tp}} 	{{skuRow.yi_tp>''?'/':''}} {{skuRow.ying_tp}}总标签：{{skuRow.yi_bq}} {{skuRow.yi_bq>''?'/':''}} {{skuRow.ying_bq}}</p>
					</van-row>



					<van-row class="goodsName">
					  <van-col span="24"> <span>商品编码：</span> {{editForm.itemid}}</van-col>
					</van-row>

					<van-row class="goodsName" style="margin-top: 5px;" >
					  <van-col span="24"> {{editForm.subsname}}</van-col>
					</van-row>

					<van-row class="goodsName" style="margin-top: 5px;">
						<p style="line-height: 24px;"> <span> [托]应分门店: </span> {{skuRow.yi_md}} {{skuRow.yi_md>''?'/':''}} {{skuRow.ying_md}} 总数量:{{skuRow.yi_qty == null?'':skuRow.yi_qty}} {{skuRow.yi_qty>''?'/':''}} {{skuRow.ying_qty}}</p>
					</van-row>
				</div>


				<div class="goodsInputWarp">
						<div class="goodsInputLabel" style="width:35%;">
							<div class="goodsInputBorder"></div>
							<div class="skuName" style="width: 120px;">分货们店：</div>
						</div>
						<van-field
							 class="skuInput"
							 clearable
							 v-model="editForm.storeid"
							 placeholder="请选择分货门店"
						 />

						 <div class="searchBtn">
						 	<button :disabled="isdisabled"  @click.stop="_getStore()" >
						 		<van-icon name="ellipsis" color="#1989fa"  />
						 	</button>
						 </div>

				</div>


				<div class="buTitle">本托 {{storeRow.storeid}} 店 总应分：{{skuRow.md_ying_fen}} 已分：{{skuRow.md_yi_fen>''?skuRow.md_yi_fen:'0'}}</div>
				<div class="buTitle">本次分货 箱装：{{storeRow.unit}} 箱数：{{storeRow.pack}} 散数：{{storeRow.qty}} 总数：{{ fmartZong(parseInt(storeRow.unit) * parseInt(storeRow.pack)+ parseInt(storeRow.qty))}}</div>


				<div class="goodsInputWarp">
						<div class="goodsInputLabel" style="width:35%;">
							<div class="goodsInputBorder"></div>
							<div class="skuName" style="width: 120px;">拣货容器：</div>
						</div>
						<van-field
							 class="skuInput"
							 clearable
							 @keyup="onEnter($event,do_inputspbarJhrq)"
							 v-model="editForm.jhrqid"
							 placeholder="请填写拣货容器"
						 />
				</div>


				<div class="savefooterBtn">
					<van-button type="info" :disabled="isdisabled" @click="fenhuoQueRen()">分货确认</van-button>
				</div>
		</div>


		<van-overlay :show="isFenHuoVisible" :lock-scroll="false">
			<div class="shipandanWrapper">
					<van-sticky>
						<van-nav-bar class="navBar" title="商品列表" left-arrow @click-left="isFenHuoVisible = false"></van-nav-bar>
					</van-sticky>
					<div class="shipandanCon" @click.stop>
							<div  v-for="(row,i) in tableData" :key="i" class="danjuRow" @click="selectFenHuoClick(row,i)" >
								<van-row class="skuList" >
								  <van-col span="24"> <span>单号：</span> {{row.bill}}</van-col>
								</van-row>

								<van-row class="skuList">
									<van-col span="24"> <span>商品名称：</span> {{row.subsname}}</van-col>
								</van-row>


								<van-row class="skuList"  >
									<van-col span="24"> <span>入库标签：</span> {{row.shserno_s}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="24"> <span>分货店：</span> {{row.storeid}}</van-col>
								</van-row>


								<van-row class="skuList"  >
									<van-col span="12"> <span>箱装：</span> {{row.unit}}</van-col>
									<van-col span="12"> <span>箱数：</span> {{row.pack}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>散数：</span> {{row.qty}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>店箱数：</span> {{row.md_pack}}</van-col>
									<van-col span="12"> <span>店箱装：</span> {{row.md_unit}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>店散数：</span> {{row.md_qty}}</van-col>
								</van-row>
							</div>
					</div>
			</div>
		</van-overlay>


		<van-overlay :show="isStoreVisible" :lock-scroll="false">
			<div class="shipandanWrapper">
					<van-sticky>
						<van-nav-bar class="navBar" title="门店列表" left-arrow @click-left="isStoreVisible = false"></van-nav-bar>
					</van-sticky>
					<div class="shipandanCon" @click.stop>
							<div  v-for="(row,i) in storeList" :key="i" class="danjuRow" @click="selectStoreClick(row,i)" >
								<van-row class="skuList" >
								  <van-col span="24"> <span>门店名称：</span>{{row.storeid}} - {{row.storename}}</van-col>
								</van-row>




								<van-row class="skuList"  >
									<van-col span="12"> <span>箱装：</span> {{row.unit}}</van-col>
									<van-col span="12"> <span>箱数：</span> {{row.pack}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>散数：</span> {{row.qty}}</van-col>
								</van-row>

								<van-row class="skuList"  >
									<van-col span="12"> <span>是否已分：</span> {{row.yn_yf}}</van-col>
									<van-col span="12"> <span>分货人：</span> {{row.fhr}}</van-col>
								</van-row>

							</div>
					</div>
			</div>
		</van-overlay>






		<van-dialog v-model="carMessageIsShow" title="提示" show-cancel-button @confirm = "_getZhuangCheBaoCun()" confirmButtonColor="#1989fa">
			<div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
				<div>
					<p class="messageConTitle">门店: {{editForm.ck_storeid}}</p>
					<p class="messageConTitle">容器记录数: {{message.hznum}}</p>
					<p class="messageConTitle">商品总数: {{message.jytotqty}}</p>
					<p class="messageConTitle">是否继续？</p>
				</div>
			</div>
		</van-dialog>



	</div>
</template>

<script>
//  import TableDemo from '@/components/table';
export default {
  data() {
    return {
			editForm:{
				shserno_s:'',
				subsname:'',
				pack:'',
				unit:'',
				qty:'',
				itemid:'',
				subid:'',
				bill:'',
				storeid:'',
				md_pack:'',
				md_unit:'',
				md_qty:'',
			},
			skuRow:{},
			isdisabled:false,
			tableData:[],
			rongqiData:{},
			isFenHuoVisible:false,
			index:0,
			wzcTableData:[],
			yzcTableData:[],
			isWZCCarVisible:false,
			timeoutId:'',
			change1dt:null, change1data:null, //记录时间和字符串
			change2dt:null, change2data:null,
			carMessageIsShow:false,
			message:{},
			storeList:[],
			isStoreVisible:false,
			storeRow:{
				fhr:"",
				pack:"",
				qty:"",
				storeid:"",
				storename:"",
				unit: "",
				yn_yf:"",
			},
			isSMcode:'', //Y 扫码 N 点击
		};
  },
	watch:{

	},
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
		fmartZong(val){
			console.log("22222")
			console.log(val)
			if(Number.isNaN(val)){
				return 0
			}else{
				return val
			}
		},
		do_inputspbar(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.shserno_s = pmtxt
			this.isSMcode = 'Y'
			this._getFenHuoBtn()
		},
		_getFenHuoBtn(){
			var _self = this;
			_self.$store.commit('showLoading');
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZTFH_qryshserno',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'shserno_s',_self.editForm.shserno_s,
				])
				},'查分货',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.tableData = rtn_json_obj
					if(_self.isSMcode == 'Y'){
							_self.editForm.shserno_s = _self.tableData[0].shserno_s
							_self.editForm.subsname  = _self.tableData[0].subsname
							_self.editForm.pack  		= _self.tableData[0].pack
							_self.editForm.unit  		= _self.tableData[0].unit
							_self.editForm.qty  			= _self.tableData[0].qty
							_self.editForm.itemid  	= _self.tableData[0].itemid
							_self.editForm.subid  		= _self.tableData[0].subid
							_self.editForm.bill  		= _self.tableData[0].bill
							// this.editForm.storeid  		= row.storeid
							_self.editForm.md_pack  		= _self.tableData[0].md_pack
							_self.editForm.md_unit  		= _self.tableData[0].md_unit
							_self.editForm.md_qty  		= _self.tableData[0].md_qty
							_self._getFenHuoMX();
					}else{
							_self.isFenHuoVisible = true
					}
					console.log("得到查分货")
					console.log(rtn_json_obj)
				}
			});
		},
		selectFenHuoClick(row){  //选择门店
			this.editForm.shserno_s = row.shserno_s
			this.editForm.subsname  = row.subsname
			this.editForm.pack  		= row.pack
			this.editForm.unit  		= row.unit
			this.editForm.qty  			= row.qty
			this.editForm.itemid  	= row.itemid
			this.editForm.subid  		= row.subid
			this.editForm.bill  		= row.bill
			// this.editForm.storeid  		= row.storeid
			this.editForm.md_pack  		= row.md_pack
			this.editForm.md_unit  		= row.md_unit
			this.editForm.md_qty  		= row.md_qty
			this.isFenHuoVisible = false
			this._getFenHuoMX();
		},
		selectStoreClick(row){
			if(row.errtext != null){
				this.$dialog.alert( {
					title: '提示',
					message:this.ryuser.kqid+'直通分货标签'+this.editForm.bill+'没有对应门店'+row.storeid+'已经分货确认,分货人'+this.ryuser.opername
				});
			}
			this.editForm.storeid  		= row.storeid
			this.storeRow  = row
			this.isStoreVisible = false
			this._getStoreMX();
		},
		_getFenHuoMX(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZTFH_qrymx',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'shserno_s',_self.editForm.shserno_s,
				'bill',_self.editForm.bill,
				])
				},'查分货明细',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.skuRow = rtn_json_obj[0]
					console.log("得到查分货明细")
					console.log(rtn_json_obj)
				}
			});
		},
		_getStoreMX(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZTFH_qrymx',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'shserno_s',_self.editForm.shserno_s,
				'bill',_self.editForm.bill,
				'storeid',_self.editForm.storeid ,
				])
				},'查分货明细',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.skuRow = rtn_json_obj[0]
					console.log("得到查分货明细")
					console.log(rtn_json_obj)
				}
			});
		},
		_getStore(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_jianhuo',
					'i':this.FNULLE([
					'opmode','Y_ZTFH_qrystoreid',
					'kqid', _self.ryuser.kqid,
					'czyid',_self.ryuser.operatorid,
					'shserno_s',_self.editForm.shserno_s,
					'storeid',_self.editForm.storeid,
					'itemid',_self.editForm.itemid,
					'subid',_self.editForm.subid,
				])
				},'查门店',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.storeList = rtn_json_obj
					console.log("得到查门店")
					console.log(rtn_json_obj)
					if(_self.storeList.length > 0){
						_self.isStoreVisible = true
					}else{
						_self.$toast('暂无门店')
					}
				}
			});
		},
		do_inputspbarJhrq(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.jhrqid = pmtxt
			this.fenhuoQueRen()
		},
		fenhuoQueRen(){
			var _self = this;
			_self.$store.commit('showLoading');
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			// storeRow
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZTFH_qrjhrq',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'shserno_s',_self.editForm.shserno_s,
				'bill',_self.editForm.bill,
				'storeid',_self.editForm.storeid,
				'jhrqid',_self.editForm.jhrqid,
				'pack',_self.storeRow.pack,
				'unit',_self.storeRow.unit,
				'qty',_self.storeRow.qty,
				'itemid',_self.editForm.itemid,
				'subid',_self.editForm.subid,
				])
				},'查分货确认',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					// _self.skuRow = rtn_json_obj[0]
					console.log("得到查分货确认")
					console.log(rtn_json_obj)
					if(rtn_json_obj[0].ret_ret == '-1'){
						_self.$toast(rtn_json_obj[0].ret_mess)
					}else{
						_self.$toast(rtn_json_obj[0].ret_mess)
						_self.editForm.shserno_s   = ''
						_self.editForm.subsname = ''
						_self.editForm.pack  		  = ''
						_self.editForm.unit  		  = ''
						_self.editForm.qty  			  = ''
						_self.editForm.itemid  	  = ''
						_self.editForm.subid  		  = ''
						_self.editForm.bill  		  = ''
						_self.editForm.storeid  		= ''
						_self.editForm.md_pack  		= ''
						_self.editForm.md_unit  		= ''
						_self.editForm.md_qty  		= ''
						_self.editForm.jhrqid = ''
						_self.storeRow = ''
						_self.skuRow = []
					}
				}
			});
		},
  },
  mounted() {

  },
	components: {
		// TableDemo
	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}



div.storeWarp{
	font-size: 13px;
	.goodsName{
		margin-top:2px;
		margin-bottom:2px;
		font-size: 20px;
		font-weight: bold;
		span{
			display: inline-block;
			width:100px;

		}
	}

}


div.carCardWarp{
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 20px;
	font-size: 14px;
	div.carCard{
		border-left: 5px solid #4998FF;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		border-radius:5px;
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom:15px;
		div.goodRow{
			margin-bottom:8px;
			span{
				display: inline-block;
				width:80px;
			}
		}
		div.goodsTitleRow{
			display: flex;
			width: 100%;
			div.goodsTitleLabel{
				width: 80px;
			}
			div.skuNoTitle{
				width: calc(100% - 80px);
			}
		}
	}
}


.savefooterBtn{
	display: flex;
	justify-content: flex-end;
	button{
		border-radius: 20px;
		width: 100px;
		height: 35px;
	}
}

.messageConTitle{
	margin-top: 10px;
	font-size: 12px;
	color: #666;
}


.savefooterBtn{
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	button{
		border-radius: 20px;
		width: 100px;
		height: 35px;
	}
}


.buTitle{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 5px;
	line-height: 24px;
}




</style>
